<template>
	<view class="container">
		<!-- 已弃用 -->
		<view class="swiper-container">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="1500">
				<swiper-item >
					<view class="swiper-item uni-bg-green">
						<image src="./static/chaoshi.jpg" ></image>
					</view>
				</swiper-item>
				<swiper-item >
					<view class="swiper-item uni-bg-green">
						<image src="./static/family.jpg" ></image>
					</view>
				</swiper-item>
				<swiper-item >
					<view class="swiper-item uni-bg-green">
						<image src="./static/chaoshi3.jpg" ></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="top">
			<view class="picture">
				<image class="image" src="../../static/FRL.jpg" mode=""></image>
			</view>
			<view class="introduce">
				<view class="name">欢迎来到福润隆超市</view>
				<text class="time">配送约20分钟</text>
			</view>
			
			<view class="map">
				<navigator  url="/pages/map/map" open-type="navigate">地图</navigator>
			</view>
		</view>
		<view class="menu">
			<view class="menu-left">
				<view class="name1"  v-for="(item,index) in this.goodsArray" :key="index" :class="{hover:num_flag==index}" @click="changeid(index)">
					{{item.leixing}} 
					<view class="number" v-if="count(index)!=0" >{{count(index)}}</view> <!-- count前面没有this -->
				</view>
			</view>
			<view class="menu-right">
				<scroll-view style="" :scroll-y="true" >
					<view class="list" >
						<view class="name2">{{show_menu.leixing}}</view>  
						<view @tap="toDetail(item)" class="cai" v-for="(item,index) in show_menu.goods" :key="index">
							<image class="picture" :src="item.sptpcflj"></image>
							<view class="introduce">
								<view class="caiming">{{item.spmc}}</view>
								<view class="price">￥{{item.spdj}}</view>
								<view class="btn">
									<view @click.stop="add(item)">+</view>
									<span :class="{active:show_num(item)!=0}">{{show_num(item)}}</span>
									<view @click.stop="subtract(item)">-</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view>	FRLsuper</view>
		<view class="bottom">
			<view class="all-price" @tap="show = true">总价:{{totalPrice}}元 
				
			</view> 
			<view style="line-height: 88rpx;"  @tap="show = true">购物车</view>
			<!-- 跳转到支付页并且传了个参数（传参用的方法是拼串） -->
			<navigator :url="'/pages/payment/payment?money='+totalPrice" open-type="navigate" class="jiesuan">去结算</navigator>
		</view>
		<!-- 底部弹窗部分 -->
		<u-popup border-radius="18" v-model="show"
		mode="bottom" length="50%" :mask="true"
		:closeable="true"
		close-icon-pos="top-right"
		@empty="empty"
		>
			<view class="pass-slot" v-for="(item,index) in this.cart" >
				<view class="item">
					<view class="left-picture">
						<image :src="item.sptpcflj"></image>
					</view>
					<view class="right-info">
						<view class="name">{{item.spmc}}</view>
						<view class="price-number">
							<view class="price">￥{{item.spdj}}</view>
							<view class="number">
								<view @tap="subtract(item)">-</view>
								<view>{{item.sale_number}}</view>
								<view @tap="add(item)">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tianchong"></view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default{
		data(){
			return {
				show:false
			}
		},
		
		computed: {
		  ...mapState(['userInformation','goodsInfor','goodsArray','num_flag','cart']),
		  ...mapGetters(['count','show_num','totalPrice','show_menu'])
		},
		
		async onLoad() {
			console.log('onload')
		},
		onShow() {
			// console.log('this.goodsArray',this.goodsArray)
		},
		
		methods:{
			toDetail(item){
				uni.navigateTo({
					url:'/pages/toDetail/toDetail?spmc='+item.spmc+'&spdj='+item.spdj+'&spxq='+item.spxq+'&sppf='+item.sppf+'&sptpcflj='+item.sptpcflj
				})
			},
			
			empty(){
				this.$store.commit('empty_cart')
			},
			
			changeid(i){
				console.log(i)
				this.$store.state.num_flag=i
			},
			
			add(shop_info){
				this.$store.commit("add_cart",shop_info);
			},
			
			subtract(shop_info){
				this.$store.commit("subtract_cart",shop_info);
			},
			
		},
		
		
	}
</script>

<style lang="scss">
	.container{
		
	}
	.swiper-container{
		// border:1rpx solid #f00;
		width: 100%;
		// height: 100rpx;
			image{
				width: 100%;
			}
	}
	
	.top{
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		margin: 0 auto;
		// border: 1px solid #f00;
		border-bottom:1rpx solid #f1f1f1 ;
		padding: 30rpx 20rpx 10rpx 20rpx;
		.picture{
			margin-right: 15rpx;
			height: 140rpx;
			width: 140rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.introduce{
			margin-right: 15rpx;
			// position: absolute;
			// width:600rpx ;
			// top:30rpx;
			// right: 10rpx;
			// border: 1px solid #f00;
			// margin-right: ;
		}
		.map{
			navigator{
				background-color: #02A774;
				color: #fff;
				border-radius: 10rpx;
			}
		}
		.name{
			font-weight: bold;
			font-size: 30rpx;
			margin-bottom: 5rpx;
		}
		.time{
			font-size: 25rpx;
		}
		.function{
			margin-top: 20rpx;
			margin-bottom: 15rpx;
		}
		.diancai{
			border-bottom:1rpx solid #02a774 ;
		}
	}
	.menu{
		// border: 1rpx solid #00f;
		overflow: hidden;
		// height: 600rpx;
		// margin-left: 14rpx;
		// padding-left: 14rpx;
		.hover{
			color: #02a774;
			background-color: #fff;
			border-radius: 0rpx;
			// border: 1rpx solid #f00;
		}
		.menu-left{
			// border: 1rpx solid #f00;
			border-right: 1rpx solid #bbb;
			height: 600rpx;
			width: 20%;
			// background: #f5f5f5;
			float: left;
			// margin-right: 20rpx;
			// padding-left: 14rpx;
			.name1{
				position: relative;
				font-weight: lighter;
				font-size: 27rpx;
				// line-height: 80rpx;
				padding: 20rpx 0;
				text-align: center;
				// border: 1rpx solid #f00;
				border-radius: 0 10rpx 10rpx 0;
				.number{
					position: absolute;
					right: 4rpx;
					top: 4rpx;
					width: 30rpx;
					// height: 30rpx;
					line-height: 30rpx;
					border-radius:50% ;
					font-size: 13rpx;
					color: #fff;
					background: #ff0000;
					// line-height: 10rpx;
				}
			}
		}
		.menu-right{
			// border: 1rpx solid red;
			// color: #fff;
			float: right;
			width: 78%;
			scroll-view{
				white-space: nowrap;
				height:600upx;
			}
			.list{
				// border: 1rpx solid blue;
				margin-bottom: 30rpx ;
			}
			.name2{
				font-weight: bold;
			}
			.cai{
				border: 1rpx solid #eee;
				padding:20rpx  10rpx;
				box-shadow: 0 2px 2px 0 #BBB;
				border-radius: 15px;
				// box-shadow: 0 10rpx 5rpx #f1f1f1;
				overflow: hidden;
				margin: 10rpx 10rpx 30rpx 0;
				height: 180upx;
				image{
					will-change: transform;
				}
				// background-color: #fff;
			}
			.picture{
				float: left;
				width:180rpx;
				height: 180rpx;
				// border: 1rpx solid red;
				margin-right: 10rpx;
			}
			.introduce{
				// border: 1rpx solid #f00;
				height: 100%;
				width: 60%;
				float: right;
				display: flex;
				flex-direction: column;
				
				.caiming{
					// border: 1rpx solid red;
					flex-grow: 1;
				}
				.price{
					// border: 1rpx solid blue;
					flex-grow: 1;
					color: #ff3826;
				}
				.btn{
					display: flex;
					line-height: 50rpx;
					// border: 1rpx solid #f00;
					view{
						border: 1px solid #969696;
						width: 50rpx;
						text-align: center;
						border-radius: 4px;
					}
					span{
						margin: 0 10rpx;
					}
					.active{
						color: #02a774;
					}
				}
			}
		}
	}
	.bottom{
		position: fixed;
		// bottom:94rpx;
		// bottom: 0;
		z-index: 99999;
		background-color: #F1F1F1;
		height: 88rpx;
		border-top:1px solid #B2B2B2;
		border-bottom:1px solid #B2B2B2;
		// margin-top: 30rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		text-align: center;
		.all-price{
			width:50%;
			line-height: 88rpx;
			text-align: left;
			padding-left: 20rpx ;
			font-size: 15px ;
			font-weight: bold;
		}
		.jiesuan{
			line-height: 88rpx;
			// background: #442818;
			background-color: #02a774;
			color:#fff;
			// flex: 1;
			width:25%;
			font-size: 14px ;
		}
	}
	.pass-slot{
		display: flex;
		flex-direction: column;
		.item{
			display: flex;
			flex-direction: row;
			// border: 1rpx solid #f00;
			border: 1rpx solid #eee;
			padding: 15rpx 0;
			.left-picture{
				// border: 1rpx solid #02A774;
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.right-info{
				// border: 1rpx solid #02A774;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.name{
					font-weight: bold;
				}
				.price-number{
					line-height: 50rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.price{
						color: #fa436a;
					}
					.number{
						display: flex;
						:nth-child(odd){
							font-size: 50rpx;
						}
						:nth-child(2){
							margin: 0 20rpx;
						}
					}
				}
			}
		}
	}
	.tianchong{
		height: 240rpx;
		// border: 1rpx solid #f00;
	}
</style>
